﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="VerticalAndHorizontal.aspx.cs"
    MasterPageFile="~/Site.master" Inherits="WS.EKA.Web.UI.Demo.VerticalAndHorizontal" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <link rel="stylesheet" type="text/css" href="/Styles/jquery.jqplot.min.css" />
    <script type="text/javascript" src="/Scripts/jquery.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.jqplot.js"></script>
    <!--ajax 请求-->
    <script type="text/javascript" src="/Scripts/plugins/jqplot.json2.js"></script>
    <!-- 垂直水平柱状图  -->
    <script type="text/javascript" src="/Scripts/plugins/jqplot.barRenderer.js"></script>
    <script type="text/javascript" src="/Scripts/plugins/jqplot.categoryAxisRenderer.js"></script>
    <script type="text/javascript" src="/Scripts/plugins/jqplot.pointLabels.js"></script>
    <script type="text/javascript">
        
        $(document).ready(function () {
            var s1 = [200, 700, 1000,2000];
            var s2 = [460, 690, 820,888];
            var s3 = [260, 320, 200,543];
            // Can specify a custom tick Array.
            // Ticks should match up one for each y value (category) in the series.
            var ticks = ['一季度', '二季度', '三季度', '四季度'];

            var plot1 = $.jqplot('chart4', [s1, s2, s3], {
                // The "seriesDefaults" option is an options object that will
                // be applied to all series in the chart.
                seriesDefaults: {
                    renderer: $.jqplot.BarRenderer,
                    rendererOptions: { 
                                    fillToZero: true,
                                    animation: {
                                            show: true,
                                            speed:2500
                                                },
                                   
                                    },
                    
                    // Show point labels to the right ('e'ast) of each bar.
                    // edgeTolerance of -15 allows labels flow outside the grid
                    // up to 15 pixels.  If they flow out more than that, they 
                    // will be hidden.
                    pointLabels: { show: true, location: 'e', edgeTolerance: -15},

                },
                // Custom labels for the series are specified with the "label"
                // option on the series option.  Here a series option object
                // is specified for each series.
                series: [{ label: '销售额' }, { label: '成本' }, { label: '净利润'}],
                // Show the legend and put it outside the grid, but inside the
                // plot container, shrinking the grid to accomodate the legend.
                // A value of "outside" would not shrink the grid and allow
                // the legend to overflow the container.
                legend: {
                    show: true,
                    placement: 'outsideGrid'
                },
                axes: {
                    // Use a category axis on the x axis and use our custom ticks.
                    xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer,
                        ticks: ticks,
                        label: '2013年度'
                    },
                    // Pad the y axis just a little so bars can get close to, but
                    // not touch, the grid boundaries.  1.2 is the default padding.
                    yaxis: {
                        pad: 1.05,
                        //这里决定Y数据显示的格式 $%d -$2500 
                        //￥%d  -￥2345
                        tickOptions: { formatString: '￥%d' },
                        label: '单位（万）'
                    }
                }
            });
        });


    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <div id="chart4">
    </div>
</asp:Content>
